<template>
    <div class="login_box">
        <form class="login_form" :action=action>
            <p>{{action}}</p>
            <h2>登陆</h2>
            <el-input class="login_form_input" v-model="username" placeholder="用户名"></el-input>
            <el-input class="login_form_input" placeholder="密码" v-model="password" show-password></el-input>
            <button type="button" @click="login">登陆</button>
        </form>
    </div>
</template>

<script>

    export default {
        name: "Login",
        data() {
            return {
                username: '',
                password: '',
                action: '',
            }
        },
        methods: {
            login() {
                if (this.username == '' || this.password == '') {
                    alert("账号密码为空");
                    return
                } else {
                    Axios({
                        url: '/admin/index',
                        method: 'post',
                        data: {
                            id: this.id
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .login_box {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #6190e8; /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #6190e8, #a7bfe8); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #E8CBC0, #636FA4);
        background-size: cover;
    }

    .login_form h2 {
        font-size: 20px;
        font-weight: 400;
        color: #3d5245;
    }

    .login_form {
        width: 240px;
        height: 220px;
        display: flex;
        flex-direction: column;
        padding: 40px;
        text-align: center;
        position: relative;
        z-index: 100;
        background: inherit;
        border-radius: 18px;
        overflow: hidden;
    }

    .login_form_input {
        margin: 9px 0;
    }

    .login_form::before {
        content: "";
        width: calc(100% + 20px);
        height: calc(100% + 20px);
        background: initial;
        box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.25);
        position: absolute;
        top: -10px;
        left: -10px;
        z-index: -1;
        filter: blur(6px);
        overflow: hidden;
    }

    .login_form button {
        outline: none;
        height: 36px;
        border: none;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        padding: 0 14px;
        color: rgb(61, 82, 69);
        margin-top: 24px;
        background-color: rgba(57, 88, 69, 0.4);
        color: white;
        /*background: linear-gradient(left, #6190E8, #A7BFE8);*/
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: 0.4s;
    }

    .login_form button:hover {
        background-color: rgba(12, 80, 38, 0.67);
    }

    .login_form button::before,
    .login_form button::after {
        content: "";
        display: block;
        width: 80px;
        height: 100%;
        background: rgba(179, 255, 210, 0.5);
        opacity: 0.5;
        position: absolute;
        left: 0;
        top: 0;
        transform: skewX(-15deg);
        filter: blur(30px);
        overflow: hidden;
        transform: translateX(-100px);
    }

    .login_form button::after {
        width: 40px;
        background: rgba(179, 255, 210, 0.3);
        filter: blur(5px);
        opacity: 0;
    }

    .login_form button:hover::before {
        transition: 1s;
        transform: translateX(320px);
        opacity: 0.7;
    }

    .login_form button:hover::after {
        transition: 1s;
        transform: translateX(320px);
        opacity: 0.7;
    }
</style>